<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
</body>
<!--你的js-->
<div style="height: 80%;position:relative;overflow-y:scroll">
  <div id="messageBox"></div>
</div>
<textarea id="txtarea" rows="3"> </textarea>
<select>
  <option value="">不分流</option>
  <option value="160769806">小开</option>
  <option value="160773066">小思</option>
</select>
<button id="send" type="button">发送</button>
<!-- IE8及以下支持JSON -->
<!--[if lt IE 9]>
<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
<![endif]-->
<!-- WSDK-->
<script src="https://g.alicdn.com/aliww/h5.imsdk/2.1.5/scripts/yw/wsdk.js"></script>
<script src="/WebIM/lib/jquery/dist/jquery.js"></script>
<script src="/WebIM/js/webimproxy.js"></script>
<script>

  $(function () {

    function addMsg(user, msg) {
      $('<div>').html('<em>' + user + '</em>' + msg).appendTo('#messageBox');
    }
    var $iframe = $('<iframe src="/WebIM/api/user">');
    $iframe.on('load',function () {
      alert(1);
      var webimProxy = new WebIMProxy({
        customServiceId: 'tb0197962'
      });

      var Event = webimProxy.Event;
      var EventTypes = webimProxy.EventTypes;

      $('#send').on('click', function () {
        var groupid = $('select').val();
        addMsg('我', $('textarea').val());
        var data = {
          touid: 'tb0197962:test',
          msg: $('textarea').val()
        };
        if (groupid) {
          data.groupid = parseInt(groupid);
        }
        webimProxy.sendMsgToCustomService(data);
      });

      // 接收到消息
      Event.on(EventTypes.CHAT_RECEIVED, function (msg) {
        addMsg(msg.from, msg.msg);
      });
    });
    $('body').append($iframe);

  });
</script>
</html>
